<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew :title="title"> </pageHeaderNew>
    </template>
    <a-tabs v-model:active-key="type" @change="getData()">
      <a-tab-pane :key="2" title="未读" />
      <a-tab-pane :key="1" title="已读" />
    </a-tabs>

    <a-space direction="vertical" fill :size="20">
      <div class="search-box">
        <div>
          <a-input-search
            :style="{ width: '320px' }"
            search-button
            v-model="searchVal"
            placeholder="输入信息标题进行搜索"
            allow-clear
            @search="search"
            @clear="search"
          />
        </div>
        <div>
          <a-popconfirm content="确认批量删除?" type="error" @ok="delIds">
            <a-button type="primary" status="danger">批量删除</a-button>
          </a-popconfirm>
        </div>
      </div>
      <a-checkbox-group @change="changeAa" v-model="checkboxIds">
        <a-list>
          {{ data }}
          <a-list-item v-for="item in data" :key="item.id">
            <a-checkbox :value="item.id">
              <a-list-item-meta @click="setMessageApi(item)">
                <template #avatar>
                  <a-avatar shape="square">
                    <img
                      alt="avatar"
                      src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
                    />
                  </a-avatar>
                </template>
                <template #title
                  ><a-space
                    ><span>{{ item.msgTitle }}</span>
                    <a-tag
                      :color="
                        item.messageObjInfo[item.messageObjInfo.length - 1]
                          .isRead === 1
                          ? 'green'
                          : 'orangered'
                      "
                      >{{
                        item.messageObjInfo[item.messageObjInfo.length - 1]
                          .isRead === 1
                          ? '已读'
                          : '未读'
                      }}</a-tag
                    >
                  </a-space></template
                >
                <!-- <template #description
              ><span>{{ item.msgContent }}</span>
            </template> -->
                <!-- <template #footer>22</template> -->
              </a-list-item-meta>
            </a-checkbox>
          </a-list-item>
        </a-list>
      </a-checkbox-group>

      <a-pagination
        :total="pagination.total"
        v-model:current="pagination.current"
        v-model:page-size="pagination.pageSize"
        show-page-size
        show-total
      />
    </a-space>
  </ContentCard>
</template>

<script lang="ts" setup>
import {
  getMessageCenter,
  getMsgApiMessag,
  delMsgApiMessagIds
} from '@/apis/notice/index';
import { defineComponent, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useNoticeStore } from '@/store/index';

const noticeStore = useNoticeStore();
const router = useRouter();
// console.log('router', router.currentRoute.name);
const title = '信息中心';
const searchVal = ref('');
const userId = Number(localStorage.getItem('userId'));
const pagination = reactive({
  // 分页数据
  showTotal: true,
  showJumper: true,
  showPageSize: true,
  pageSizeOptions: [10, 20, 30, 50, 100],
  current: 0,
  total: 0,
  pageNumber: null,
  pageSize: null
});
const params = reactive({
  // 分页数据，用于请求
  pageNumber: 0,
  pageSize: 10
});

const type = ref(2);
const checkboxIds = ref([]);

const data = ref([]);
const getData = async () => {
  try {
    let msg = {};
    if (searchVal.value) msg.name = searchVal.value;
    const res = await getMessageCenter({
      ...params,
      userId,
      type: type.value,
      ...msg
    });
    const { content, pageable } = res;
    data.value = content;
    pagination.current = pageable.pageNumber;
    pagination.total = pageable.totalItems;
    pagination.pageSize = pageable.pageSize;
  } catch (err: unknown) {
    console.log(err);
  }
};
getData();

const setMessageApi = async (item: any) => {
  try {
    let data = {};
    if (item.messageObjInfo[item.messageObjInfo.length - 1].isRead === 2) {
      data = await getMsgApiMessag({ id: item.id, userId });
    }
    await noticeStore.getMessagTotal();
    if (Object.keys(data).length == 0) data = item;

    router.push({
      name: 'InformationCenterDetails',
      query: { val: JSON.stringify(data) }
    });
  } catch (err: unknown) {
    console.log(err);
  }
};

const search = () => {
  getData();
};

const delIds = async () => {
  await delMsgApiMessagIds({ ids: checkboxIds.value, userId });
  getData();
};
</script>

<style lang="less" scoped>
:deep(.arco-pagination) {
  float: right;
}

:deep(.arco-checkbox-group) {
  width: 100%;
}

.search-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>
